const contain = document.querySelector('.contain');
// 电影
const movieSelect = document.getElementById("movie");
// 未占座位
const seats = document.querySelectorAll('.row .seat:not(.occupied)')
// 选取总座位
const count = document.getElementById('count');
// 票价总计
const total = document.getElementById('total');

// 从本地获取选中的电影和座位信息
populateUI()


// 获取当前电影的票价,转number类型
let ticketPeice = +movieSelect.value;

/* 保存选中电影和价格到本地 */
function setMovieData(movieIndex, moviePrice) {
    localStorage.setItem('selectedMovieIndex', movieIndex);
    localStorage.setItem('selectedMoviePrice', moviePrice);
}


/* 更新总价和座位数 */
function updateSelectedCount() {
    // 所有选中的座位
    const selectedSeats = document.querySelectorAll('.row .seat.selected');
    // 选中座位在未占座位中的位置
    const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat))
    localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));
    // 选中的座位总数
    const selectedSeatCount = selectedSeats.length;
    // 设置座位数和总价格
    count.innerText = selectedSeatCount;
    total.innerText = selectedSeatCount * ticketPeice;

    // 保存电影信息
    setMovieData(movieSelect.selectedIndex, movieSelect.value)

}

/* 获取电影座位和提示信息界面 */
function populateUI() {
    // 获取座位信息
    const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
    console.log(selectedSeats);
    if (selectedSeats !== null && selectedSeats.length > 0) {
        seats.forEach((item, index)=>{
            if (selectedSeats.indexOf(index)> -1) {
                item.classList.add('selected')
            }
        })
    }

    const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
    if(selectedMovieIndex!==null) {
        movieSelect.selectedIndex = selectedMovieIndex;
    }
}


/* 电影座位选择,在contain监听点击事件 */
contain.addEventListener('click', e => {
    // 座位未被占
    if (e.target.classList.contains('seat') &&
        !e.target.classList.contains('occupiced')
    ) {
        // selected类不存在则添加，存在则移除
        e.target.classList.toggle('selected')
    }
    updateSelectedCount();
})

/* 获取当前电影的信息 */
movieSelect.addEventListener('change', e => {
    // 当前电影的票价
    ticketPeice = +e.target.value;
    // 保存电影信息
    setMovieData(e.target.selectedIndex, e.target.value)

    // 更新总价
    updateSelectedCount();
})

// 初始化
updateSelectedCount()
